GAS樣版引擎

2023 iThome 鐵人賽

DAY 7

Modern Web

Google Apps Script 整合運用系列第 7 篇

15th鐵人賽

ugm

2023-09-10 22:49:25

850 瀏覽

分享至

GAS樣版引擎

HtmlService.createTemplateFromFile(file) 是 Google Apps Script 中用於創建 HTML 模板的方法，它的主要用途是將 HTML 文件中的動態數據嵌入到模板中，以生成動態的 HTML 內容，然後您可以將這個動態 HTML 用於 Web 應用程序、自定義對話框或電子郵件模板等。

以下是該方法的主要用途和工作原理：

創建 HTML 模板：首先，您需要創建一個包含您想要動態生成的 HTML 內容的 HTML 文件。這個 HTML 文件中可以包含占位符，例如 <?= dynamicData ?>，這些占位符將稍後被動態數據替換。
使用 HtmlService.createTemplateFromFile(file)：通過調用 HtmlService.createTemplateFromFile(file)，其中 file 是您的 HTML 文件的名稱（不包括副檔名），您可以將該 HTML 文件轉換為一個可編程的模板對象。
替換動態數據：一旦您有了模板對象，您可以使用 evaluate() 方法來替換模板中的占位符。例如，您可以使用 template.evaluate().setTitle('動態標題').setContent('動態內容') 來替換模板中的 <?= dynamicData ?> 占位符，將其替換為具體的內容。
生成最終的 HTML 內容：最後，您可以使用 getContent() 方法來獲得最終的動態生成的 HTML 內容。
<? .... ?>：這標籤代表樣版引擎語法，可以將變數替代，也可以調用後台的函式
<?= .... ?>：印出變數內容相當於 PHP 的 echo, 但內容屬性是「文字」
<?!= .... ?>：如果內容是HTML語法，則須此方法
設定網頁標題

setTitle(title)

允許「應用程式」嵌入在其他網頁

setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

自動響應

addMetaTag('viewport', 'width=device-width, initial-scale=1')

子樣版
將樣版與變數替換後，得到HTML語法

getContent()

這個方法對於動態生成和呈現 HTML 內容非常有用，特別是在 Google Apps Script 項目中，當您需要在網頁應用程序、自定義對話框、電子郵件通知等中使用動態 HTML 內容時。通過將靜態 HTML 文件與動態數據結合使用，您可以更靈活地生成自定義的用戶界面。

Bootstrap5

官網：https://getbootstrap.com/
中文參考網站：https://bootstrap5.hexschool.com/
範本

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap Icon

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

JQUERY

網站：https://jquery.com/
引入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

index.html


<html>
  <head>
    <meta charset="utf-8">
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

    <!-- bootstrap icon -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

  </head>
  <body>
    <h2>樣板</h2>
  </body>
</html>

doGet


/*========================================
  doGet
=========================================*/
function doGet(e){
  // 主樣版 
  let tmp = HtmlService.createTemplateFromFile('index');

  return tmp.evaluate().setTitle('網站標題').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}